
<template>
  <view >
    <u-cityPopup :leval="1" :form="dpdzPopupForm" @chooseChange="provinceCityAreaChange" ref="cityPopup"></u-cityPopup>
    <div style="height: 1px;background: #EFEFEF;width:100%"></div>
    <div class="addNew">
      <div class="h100 oy ">
        <div class="bfff mt20">
          <uv-form :rules="rules" :model="addressForm" ref="addressForm" labelWidth="170rpx" :labelStyle="{paddingLeft: '30rpx', fontSize: '30rpx', fontWeight: 400, color: '#595757'}">
            <uv-form-item v-if="routeQuery.current == 0" label="收件人" prop="name" borderBottom>
              <uv-input v-model="addressForm.name" border="none" placeholder="请填写收件人姓名" placeholderStyle="color:#C9CACA;font-size:30rpx" />
            </uv-form-item>
            <uv-form-item v-if="routeQuery.current == 1" label="选择国家" borderBottom prop="provinceCityArea">
              <div class="fz30 pl10" @click="$refs.cityPopup.openFun()" style="width: 100%">
                <div :style="{color: !addressForm.provinceCityArea ? '#C9CACA' : '#333' }">{{ addressForm.provinceCityArea || '国家' }}</div>
              </div>
              <template v-slot:right>
                <div class="pr30">
                  <uv-icon color="#C9CACA" size="32rpx" name="arrow-right"></uv-icon>
                </div>
              </template>
            </uv-form-item>
            <uv-form-item label="选择地区" borderBottom prop="provinceCityArea">
              <div class="fz30 pl10" @click="$refs.cityPopup.openFun()" style="width: 100%">
                <div :style="{color: !addressForm.provinceCityArea ? '#C9CACA' : '#333' }">{{ addressForm.provinceCityArea || '省/市/区' }}</div>
              </div>
              <template v-slot:right>
                <div class="pr30">
                  <uv-icon color="#C9CACA" size="32rpx" name="arrow-right"></uv-icon>
                </div>
              </template>
            </uv-form-item>
            <uv-form-item label="详细地址" prop="address" borderBottom>
              <uv-input v-model="addressForm.address" border="none" placeholder="如街道、小区、乡镇、村" placeholderStyle="color:#C9CACA;font-size:30rpx"></uv-input>
            </uv-form-item>
            <uv-form-item v-if="routeQuery.current == 0" label="手机号码" prop="tel">
              <uv-input v-model="addressForm.tel" border="none" placeholder="联系人号码" placeholderStyle="color:#C9CACA;font-size:30rpx" />
            </uv-form-item>
          </uv-form>
        </div>
      </div>
      <button-lst @submit="submitTap"></button-lst>
    </div>
  </view>
</template>
<script>
import cityPopup from './cityPopup.vue'
import commonButtonVue from "../components/commonButton.vue";
import { returnAddressAdd, returnAddressID, returnAddressEdit } from "@/api/merchant.js";
export default {
  components: {
    "button-lst": commonButtonVue,
    "u-cityPopup": cityPopup
  },
  data() {
    return {
      routeQuery: {},
      form: {},
      addressForm: {
        tel: null,
        name: null,
        address: '',
        provinceCityArea: ''
      },

      rules: {
        'provinceCityArea': { type: 'string', required: true, message: '请选择地区', trigger: ['blur', 'change'] },
        'address': { type: 'string', required: true, message: '请填写详细地址', trigger: ['blur', 'change'] },
        'name': { type: 'string', required: true, message: '请填写收件人', trigger: ['blur', 'change'] },
        'tel': {
          type: 'string', required: true, message: '电话号码格式错误', trigger: ['blur'],
          validator: (rule, value, callback) => {
            return uni.$uv.test.mobile(value)
          }

        },
      },
      dpdzPopupForm: {}
    }
  },

  onLoad(options) {
    if (options) this.routeQuery = options
    let title = '新增地址'
    if (this.routeQuery.id) {
      title = this.routeQuery.current == 1 ? '编辑电子面单发货地址' : '编辑地址'
    } else {
      title = this.routeQuery.current == 1 ? '新增电子面单发货地址' : '新增地址'
    }
    uni.setNavigationBarTitle({ title });
    this.initPage()
  },
  onReady() {

  },
  methods: {
    provinceCityAreaChange(item) {
      let { province, city, area, district } = item
      let provinceCityArea = (province.title ? province.title : '') + (city.title ? '/' + city.title : '') + (area.title ? '/' + area.title : '') + (district.title ? '/' + district.title : '')
      this.$set(this.addressForm, 'provinceCityArea', provinceCityArea)
      this.$set(this.addressForm, 'province', province.title)
      this.$set(this.addressForm, 'city', city.title)
      this.$set(this.addressForm, 'area', area.title)
      // this.$set(this.addressForm, 'district', district.title)
      this.dpdzPopupForm = JSON.parse(JSON.stringify(this.addressForm))
    },
    submitTap() {
      this.$refs.addressForm.validate().then(() => {
        let form = JSON.parse(JSON.stringify(this.addressForm))
        if (!form.area) return uni.$uv.toast('请选择省市区')
        form.province = form.province
        form.area = form.area
        form.city = form.city
        delete form.provinceCityArea
        delete form.district
        uni.showLoading({ title: '加载中', mask: true })
        if (this.routeQuery.id) {
          returnAddressEdit(form).then(res => {
            if (res.code === 200) {
              uni.hideLoading()
              uni.$uv.toast('编辑成功')
              setTimeout(() => {
                uni.navigateBack({ delta: 1 });
              }, 500);
            }
          })
        } else {
          returnAddressAdd(form).then(res => {
            if (res.code === 200) {
              uni.hideLoading()
              uni.$uv.toast('添加成功')
              setTimeout(() => {
                uni.navigateBack({ delta: 1 });
              }, 500);
            }
          })
        }
      })
    },

    initPage() {
      if (this.routeQuery.id) {
        uni.showLoading({ title: '加载中', mask: true })
        returnAddressID(this.routeQuery.id).then(res => {
          if (res.code === 200) {
            let dpdzPopupForm = {
              id: res.result.id,
              province: res.result.province,
              area: res.result.area,
              name: res.result.name,
              tel: res.result.tel,
              city: res.result.city,
              address: res.result.address,
            }
            let provinceCityArea = (dpdzPopupForm.province ? dpdzPopupForm.province : '') + (dpdzPopupForm.city ? '/' + dpdzPopupForm.city : '') + (dpdzPopupForm.area ? '/' + dpdzPopupForm.area : '')
            dpdzPopupForm.provinceCityArea = provinceCityArea
            this.dpdzPopupForm = dpdzPopupForm
            this.addressForm = dpdzPopupForm
            uni.hideLoading()

          }
        })

      }

    }
  }

}
</script>

<style lang="scss">
page {
  background-color: #f7f8f8;
}
</style>

<style lang="scss" scoped>
@import "../common.scss";
.addNew {
    height: calc(100vh - 45px);
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
</style>